<!--

/*
* Copyright (C) 2005-2013 University of Sydney
*
* Licensed under the GNU License, Version 3.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.gnu.org/licenses/gpl-3.0.txt
*
* Unless required by applicable law or agreed to in writing, software distributed under the License
* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing permissions and limitations under
* the License.
*/

/**
* brief description of file
*
* @author      Tom Murtagh
* @author      Kim Jackson
* @author      Ian Johnson   <ian.johnson@sydney.edu.au>
* @author      Stephen White   <stephen.white@sydney.edu.au>
* @author      Artem Osmakov   <artem.osmakov@sydney.edu.au>
* @copyright   (C) 2005-2013 University of Sydney
* @link        http://Sydney.edu.au/Heurist
* @version     3.1.0
* @license     http://www.gnu.org/licenses/gpl-3.0.txt GNU License 3.0
* @package     Heurist academic knowledge management system
* @subpackage  !!!subpackagename for file such as Administration, Search, Edit, Application, Library
*/

-->


<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel=stylesheet href="../../common/css/global.css">
        <link rel=stylesheet href="../../common/css/autocomplete.css">

        <title>Add tags</title>
        <style>

            input#tags {
                border: 1px solid black;
                padding: 1px 4px;
                font-size: 11px;
                line-height: 1.5em;	/* only has an effect on safari ... otherwise we get a jumbo-vertical text box */
                width: 120%;
            }

            table { margin-top: 10px; }
            .prompt { font-size: 120%; color: green; }

            .add-tag-link { font-size: 100%; padding: 0 0.5ex; }

            .outer-div { padding: 3px; }

            .outer-div div { padding: 3px; }
            .outer-div div div { padding: 0; }

            .tag-link-nest .prompt { position: absolute; }
            .tag-link-nest .tag-links { text-indent: 4em; }

        </style>
    </head>
 <body width=450 height=360>
  <script src="../../common/js/utilsLoad.js"></script>
  <script src="../../common/php/displayPreferences.php"></script>
  <script src="autocompleteTags.js"></script>

<div id=no-tags style="display: none;">
     <div class="prompt" style="font-weight: bold; padding: 1em; border: 1px solid black; margin: 1em 1em 0 1em;">
     You don't have any personal tags set for this record.  Tags are optional, but useful.
     </div>
</div>
<div>
         <div class="prompt" style="padding: 1ex 2em;">
          Type as many tags as you like, separated by commas.  Tags may contain spaces.
          New tags are added automatically and are specific to each user.
         </div>
</div>

<form onsubmit="window.close(document.getElementById('tags').value); return false;">
  <table border=0 cellspacing=3 cellpadding=0 style="width: 100%;">
   <tr>
    <td style="width: 8ex; text-align: right; white-space:nowrap;" nowrap><b>Add tags</b></td>
    <td style="width: auto;"><input id=tags name=tagString type=text style="width: 100%;"></td>
    <td style="width: 4em;"><input type=submit value=Save></td>
   </tr>
  </table>
</form>
<div class=outer-div>
<table border=0 cellpadding=2 cellspacing=2>
 <tr>
  <td align=right><span class=prompt>Top:</span></td>
   <td id=top-tags-cell>
    <a href="#" class=add-tag-link onclick="addTag('Favourites'); return false;">Favourites</a>
    <a href="#" class=add-tag-link onclick="addTag('To Read'); return false;">To Read</a>
    |
  </td>
 </tr>
 <tr>
  <td align=right><span class=prompt>Recent:</span></td>
  <td id=recent-tags-cell></td>
 </tr>
 <tr>
  <td></td>
  <td><div class=prompt style="padding-top: 1ex;">Click the tags above to add them</div></td>
 </tr>
 <tr>
  <td colspan=2 align=right><b class=prompt><a href="../../context_help/tags.html" onclick="top.HEURIST.util.popupURL(top, href); return false;">More about tags</a></b></td>
 </tr>
</table>
<div  style="position:absolute;bottom:20px;font-size: 85%;">
<input type="checkbox" id="cbPrefToggleOff" checked="checked" onclick="onTooglePopup(event)"/>Prompt for tags on data addition (you can turn this popup back on in user preferences)
</div>
<script>
if (location.search.match(/no-tags/))	// only show the no-tags row if requested
	document.getElementById("no-tags").style.display = "";
</script>
</div>

  <script>

var tags = document.getElementById("tags");
tags.value = tags.defaultValue = "";

function addTag(tag) {
	var tags = document.getElementById("tags");

	var tagPos = tags.value.indexOf(tag);
	if (tagPos != -1) {
		if (tags.value.substring(0, tagPos).match(/(?:^|,)\s*$/)  &&
		    tags.value.substring(tagPos + tag.length).match(/^\s*(?:,|$)/)) {
			// tag is already there
			return;
		}
	}

	if (tags.value) tags.value += "," + tag;
	else tags.value = tag;

	if (tags.onchange) tags.onchange();

	tags.focus();
}

function addTagLink(tag, parentNode) {
	var newLink = document.createElement("a");
		newLink.href = "#";
		newLink.className = "add-tag-link";
		newLink.onclick = function() { addTag(tag); return false; };
		newLink.appendChild(document.createTextNode(tag));

	parentNode.appendChild(newLink);
}

function onTooglePopup(event){
	top.HEURIST.util.setDisplayPreference('tagging-popup', event.target.checked?"true":"false");
}

var alphasort = function(a,b) { a = a.toLowerCase(); b = b.toLowerCase(); return (a < b)? -1 : (a > b)? 1 : 0; };

var topTagsCell = document.getElementById("top-tags-cell");
var topTags = top.HEURIST.user.topTags.slice(0);
topTags.sort(alphasort);
for (var i=0; i < topTags.length; ++i) {
	addTagLink(topTags[i], topTagsCell);
}
var recentTagsCell = document.getElementById("recent-tags-cell");
var recentTags = top.HEURIST.user.recentTags.slice(0, 5);
recentTags.sort(alphasort);
for (var i=0; i < recentTags.length; ++i) {	// only use the last 5 tags here, we are starved for space
	addTagLink(recentTags[i], recentTagsCell);
}



top.HEURIST.registerEvent(window, "load", function() {
	var tagsElt = document.getElementById('tags');
	new top.HEURIST.autocomplete.AutoComplete(tagsElt, top.HEURIST.util.tagAutofill, { nonVocabularyCallback: top.HEURIST.util.showConfirmNewTag });
	setTimeout(function() { tagsElt.focus(); }, 0);
});

  </script>

 </body>
</html>
